<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="./default.css" />
    <title>弹框</title>
    <style>
      .bd {
        font-weight: bold;
      }

      .orange {
        color: #e36b22;
      }

      .frame {
        width: 700px;
        border-radius: 8px;
        overflow: hidden;
        font-size: 12px;
        border: 1px solid #ccc;
      }

      .frame .title-box {
        width: 100%;
        border-bottom: 1px solid #ccc;
        box-shadow: 0px 0px 3px #ccc;
      }

      .frame .title-box .title {
        width: 94%;
        margin: 0 auto;
        padding: 14px 0;
        font-size: 18px;
        font-weight: bold;
      }

      .frame .tent {
        width: 94%;
        margin: 0 auto;
      }

      .frame .pay {
        border: 1px solid #ccc;
        padding-left: 12px;
        box-sizing: border-box;
        background-color: #f7f7f7;
        padding-bottom: 24px;
        margin-top: 20px;
      }

      .frame .pay .li {
        width: 100%;
      }

      .frame .pay .title {
        font-size: 16px;
        font-weight: bold;
        padding: 24px 0;
      }

      .frame .pay .right {
        width: 32%;
      }

      .frame .pay .left {
        width: 64%;
      }

      .frame .pay .text {
        padding: 8px 0;
      }

      .frame .pay .money {
        font-size: 16px;
      }

      .frame .copy {
        color: #e36b22;
        border: 1px solid #e36b22;
        padding: 1px 6px;
        border-radius: 6px;
        margin-left: 10px;
        cursor: pointer;
        user-select: none;
      }

      .frame .pay .con {
        width: 82%;
        margin: 0 auto;
      }

      .frame .pay .item {
        position: relative;
        /* width: 33.33%; */
        height: 26px;
        padding-left: 18px;
        margin-right: 14px;
        margin-bottom: 14px;
      }

      .frame .pay .bank {
        position: relative;
        padding-left: 5em;
        box-sizing: border-box;
      }

      .frame .pay .name {
        position: absolute;
        height: 25px;
        left: 0;
        top: 0;
        line-height: 25px;
        /* transform: translateY(50%); */
      }

      .frame .pay .radio {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
      }

      .frame .tip {
        width: 100%;
        line-height: 1.5;
        background-color: #fffdc7;
        text-align: left;
        color: #a42020;
      }

      .frame .mode {
        padding-left: 0;
        padding-bottom: 0;
      }

      .frame .pay .title-mode {
        padding-left: 12px;
      }
      .frame .btn-box {
        width: 100%;
        padding: 10px 0;
        margin: 10px 0;
        background-color: #fffdfd;
        text-align: center;
      }

      .frame .btn {
        display: inline-block;
        padding: 8px 10px;
        background-color: #ff5529;
        font-size: 12px;
        color: #fff;
        border-radius: 6px;
        cursor: pointer;
        user-select: none;
      }
    </style>
  </head>
  <body>
    <div class="frame">
      <div class="title-box">
        <p class="title">租金网上支付</p>
      </div>

      <div class="tent">
        <!-- 付款信息 -->
        <ul class="pay clearfix">
          <li class="li f-l title ">付款信息</li>
          <li class="li text clearfix">
            <p class="f-l left">
              缴款金额：<span class="money orange">12562元</span>
            </p>
            <p class="f-r right">缴款人：吴辉</p>
          </li>
          <li class="li text clearfix">
            <p class="f-l left">
              承租资产：江西省九江市浔阳区大中路52号江西省九江市浔阳区大中路52号
            </p>
            <p class="f-r right">缴款日期：2019-05-26 &nbsp;&nbsp;15:26:03</p>
          </li>
        </ul>
        <!-- end -->

        <!-- 收款信息 -->
        <ul class="pay clearfix">
          <li class="li f-l title ">收款信息</li>
          <li class="li text clearfix">
            <p class="f-l left">收款单位：九江市国有资产经营管理中心</p>
            <p class="f-r right">
              开户行：<span class="money bd">江西银行</span>
            </p>
          </li>
          <li class="li text clearfix">
            <p class="f-l left">
              银行账号：<span class="money bd">65554443332220098</span>
              <span class="copy">复制账号</span>
            </p>
          </li>
        </ul>
        <!-- end -->

        <!-- 支付方式 -->
        <ul class="pay mode clearfix">
          <li class="li f-l title title-mode ">支付方式</li>
          <li class="con clearfix">
            <div class="bank clearfix">
              <div class="f-l name">网上银行：</div>
              <div class="item f-l">
                <input type="radio" name="pay" id="" class="radio" />
                <img src="./img/img-1.png" alt="" />
              </div>
              <div class="item f-l">
                <input type="radio" name="pay" id="" class="radio" />
                <img src="./img/img-2.png" alt="" />
              </div>
              <div class="item f-l">
                <input type="radio" name="pay" id="" class="radio" />
                <img src="./img/img-3.png" alt="" />
              </div>
              <div class="item f-l">
                <input type="radio" name="pay" id="" class="radio" />
                <img src="./img/img-4.png" alt="" />
              </div>
              <div class="item f-l">
                <input type="radio" name="pay" id="" class="radio" />
                <img src="./img/img-5.png" alt="" />
              </div>
            </div>
          </li>

          <p class="tip f-l">
            1、请您牢记收款信息，点击“确认无误，下一步”操作按钮，前往选择的网上银行进行网上缴费。
          </p>
          <p class="tip f-l">
            2、本平台缴费信息更新与银行数据存在延时，请知晓！若有租金缴费信息疑问，请联系九江市国有资产经营管理中心。
          </p>
        </ul>
        <!-- end -->

        <div class="btn-box">
          <div class="btn">确认无误，下一步</div>
        </div>
      </div>
    </div>
  </body>
</html>
